<template>
  <view class="card-page" :style="objColor">
    <view class="card-list" v-for="(item, index) in cardList" :key="index">
      <view class="card-info">
        <view class="card-num">卡号：{{ item.number || '-' }}</view>
        <view class="card-time">绑定时间：{{ item.createTime || '-' }}</view>
      </view>
      <view class="card-edit">
        <view class="trash-btn" @click="onDelete(item)">
          <uni-icons type="trash" size="22" color="#f44336"></uni-icons>
        </view>
      </view>
    </view>

    <Upgrading v-if="cardList.length == 0" text1="暂未绑定充电卡"></Upgrading>

    <view class="fixed-down">
      <view class="add-btn" @click="toAdd">添加新卡</view>
    </view>
  </view>
</template>

<script>
import Upgrading from '@/components/upgrading/upgrading';
import { getCardList, delCardInfo } from '../../api/card'

export default {
  components: {
    Upgrading,
  },

  data() {
    return {
      cardList: []
    }
  },

  onLoad() {
  },

  onShow() {
    this._getCardList()
  },

  methods: {
    // 获取列表数据
    _getCardList() {
      getCardList().then(res => {
        const { code, data } = res
        if (code === 0) {
          this.cardList = data
        }
      })
    },

    // 删除卡
    onDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定删除【'+ item.number +'】卡号？',
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
            this.delCardInfoFn(item)
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },

    // 删除卡 FN
    delCardInfoFn(item) {
      delCardInfo({ id: item.id }).then(res => {
        const { code, msg } = res
        if (code === 0) {
          uni.showToast({
            title: '删除成功',
            icon: 'none'
          })
          this._getCardList()
        } else {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
      })
    },

    // 添加新卡
    toAdd() {
      uni.navigateTo({
        url: '/mine/pages/bindChargeCard/addCard'
      })
    },
  }
}
</script>

<style lang='less' scoped>
.card-page {
  padding-bottom: 200rpx;
}

.card-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid #f0f0f0;
  margin: 32rpx;
  padding: 32rpx;
  box-sizing: border-box;
  border-radius: 12rpx;

  .card-info {
    .card-num {
      font-size: 32rpx;
      color: #353535;
    }

    .card-time {
      margin-top: 18rpx;
      color: #999;
      font-size: 24rpx;
    }
  }

  .card-edit {
    flex-shrink: 0;

    .trash-btn {
      // width: 76rpx;
      // height: 76rpx;
      // border-radius: 50%;
      // background-color: #f44336;
      // display: flex;
      // align-items: center;
      // justify-content: center;
    }
  }
}

.fixed-down {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 24rpx 32rpx 66rpx;
  box-sizing: border-box;
  background-color: #fff;

  .add-btn {
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    border-radius: 12rpx;
    background: var(--btnColor);
  }
}
</style>
